<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<link href="css/bootstrap.min.css" rel="stylesheet"/>
	<link href="css/new.css" rel="stylesheet"/>
	
</head>
<body class="gray-bg">
<!--右侧主体-->
<p class="wenshi-title">1#日光温室种植任务</p>
<div class="standard02-detail ">
   <div class="detail02-main col-lg-6">
       <!--基本信息-->
       <div class="top clearfix ">
           <div class="right-mes">
   			<div class="left-img"><img src="img/detailImg.png"  alt=""></div>
   			<div class="mes-list clearfix">
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>作物品种：</label><span>千禧</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>所属基地：</label><span>巨山农场</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>作物名称：</label><span>西红柿</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>所属温室：</label><span>1#日光温室</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种植日期：</label><span>2019.09.06</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种子编号：</label><span>10</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>总周期（天）：</label><span>102</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种植版块（亩）：</label><span>1</span></div>
   			</div>
               <div class="mes-top clearfix">
                   <span class="bar-title">生产阶段：</span>
                   <div class="progressBar">
                       <ul class="progressBar-ul clearfix " style="padding: 0;" id="progressBar-ul">
                           <div class="currentStep"></div>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                       </ul>
                   </div>
               </div>
              
           </div>
       </div>
   </div>
   <div class="detail02-main col-lg-6">
       <!--基本信息-->
       <div class="top clearfix ">
           <div class="right-mes">
   			<div class="left-img"><img src="img/detailImg.png"  alt=""></div>
   			<div class="mes-list clearfix">
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>作物品种：</label><span>千禧</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>所属基地：</label><span>巨山农场</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>作物名称：</label><span>西红柿</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>所属温室：</label><span>1#日光温室</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种植日期：</label><span>2019.09.06</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种子编号：</label><span>10</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>总周期（天）：</label><span>102</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种植版块（亩）：</label><span>1</span></div>
   			</div>
               <div class="mes-top clearfix">
                   <span class="bar-title">生产阶段：</span>
                   <div class="progressBar">
                       <ul class="progressBar-ul clearfix " style="padding: 0;" id="progressBar-ul">
                           <div class="currentStep"></div>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                       </ul>
                   </div>
               </div>
              
           </div>
       </div>
   </div>
   <div class="detail02-main col-lg-6">
       <!--基本信息-->
       <div class="top clearfix ">
           <div class="right-mes">
   			<div class="left-img"><img src="img/detailImg.png"  alt=""></div>
   			<div class="mes-list clearfix">
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>作物品种：</label><span>千禧</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>所属基地：</label><span>巨山农场</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>作物名称：</label><span>西红柿</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>所属温室：</label><span>1#日光温室</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种植日期：</label><span>2019.09.06</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种子编号：</label><span>10</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>总周期（天）：</label><span>102</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种植版块（亩）：</label><span>1</span></div>
   			</div>
               <div class="mes-top clearfix">
                   <span class="bar-title">生产阶段：</span>
                   <div class="progressBar">
                       <ul class="progressBar-ul clearfix " style="padding: 0;" id="progressBar-ul">
                           <div class="currentStep"></div>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                       </ul>
                   </div>
               </div>
              
           </div>
       </div>
   </div>
   <div class="detail02-main col-lg-6">
       <!--基本信息-->
       <div class="top clearfix ">
           <div class="right-mes">
   			<div class="left-img"><img src="img/detailImg.png"  alt=""></div>
   			<div class="mes-list clearfix">
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>作物品种：</label><span>千禧</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>所属基地：</label><span>巨山农场</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>作物名称：</label><span>西红柿</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>所属温室：</label><span>1#日光温室</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种植日期：</label><span>2019.09.06</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种子编号：</label><span>10</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>总周期（天）：</label><span>102</span></div>
   			    <div class="mes-item col-sm-6 col-md-6 col-lg-6"><label>种植版块（亩）：</label><span>1</span></div>
   			</div>
               <div class="mes-top clearfix">
                   <span class="bar-title">生产阶段：</span>
                   <div class="progressBar">
                       <ul class="progressBar-ul clearfix " style="padding: 0;" id="progressBar-ul">
                           <div class="currentStep"></div>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                           <li class="p-item">
                               <div class="itemBg"></div>
                               <div class="itemTxt">整地</div>
                           </li>
                       </ul>
                   </div>
               </div>
              
           </div>
       </div>
   </div>
   
	
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>


<script>
    $(function(){

        // 时间轴颜色
        var topColor = ['#47aa57','#9bc24d','#f29140','#eb4745','#e32088','#92398b','#0090cb','#fac736','#ec4846']
		var _ulArr = $('.progressBar-ul')
        
		for(var i=0;i<_ulArr.length;i++){
			initProgressBar(_ulArr[i])
		}
		function initProgressBar(_ul) {
			var _liArr = $(_ul).children(".p-item")
			var _liWidth = 100/_liArr.length
			_liArr.each(function (index) {
			    if (_liArr.length>1){
			        if (index==0){
			            $(this).find(".itemBg").addClass('first')
			        }else if(index==_liArr.length-1){
			            $(this).find(".itemBg").addClass('last')
			        }
			    }else{
			        $(this).find(".itemBg").addClass('onlyOne')
			    }
			    var _bgColor = topColor[index%topColor.length]
			    $(this).find(".itemBg").css('background-color',_bgColor)
			    $(this).find(".itemTxt").css('color',_bgColor)
			    $(this).width(_liWidth+'%')
			})
			
			var _currenttep = 6
			var _dis = 0
			_liArr.each(function (index) {
			    if(index < _currenttep){
			        _dis+=$(this).find('.itemBg').eq(0).width()
			    }
			})
			var _dis02 = $(_ul).children(".p-item").eq(_currenttep-1).find('.itemBg').eq(0).width()/2
			_dis = _dis- _dis02
			$('.currentStep').css({
			    'left':_dis,
			    'border-top':'15px solid'+topColor[(_currenttep-1)%topColor.length]
			})
		}
		
        

        /** 生产阶段
         * @type {number}:当前生产阶段1-9步的某一个数字
         * @private
         */
        


    });
</script>
</body>
</html>
